<template id="temp">
  <div class="capp">
    <van-nav-bar
      title="在线客服"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
        <div class="ul">
          <div class="li" v-for="(v,i) in msqlist" :key="i">
            <div class="lisr" v-show="v.timeid==timeid?true:false">
              <p style="width:100%;" class="sp">
                <div style="border-radius:50%;width:35px;height:35px;overflow:hidden;">
                  <img src="/src/img/10076.jpg" alt="" style="width=100%; height=100%" >
                </div>
              </p>
          <p class="msgp"  v-if="v.imgs==''?true:false">
            {{v.msg}}
          </p>
          <p class="msgp"  v-if="v.imgs==''?false:true">
            <img :src="v.imgs" alt="" style="width=100px;height:120px;" >
          </p>
            </div>

            <div class="lisl" v-show="v.timeid==timeid?false:true">
              <p style="width:100%;" class="sp">
            <div style="border-radius:50%;width:35px;height:35px;overflow:hidden;">
              <img src="/src/img/10076.jpg" alt="" style="width=100%; height=100%" >
            </div>
          </p>
          <p class="msgp"  v-if="v.imgs==''?true:false">
            {{v.msg}}
          </p>
          <p class="msgp"  v-if="v.imgs==''?false:true">
            <img :src="v.imgs" alt="" style="width=100px;height:120px;" >
          </p>
            </div>
          
      </div>
    </div>
    <div class="inpbottom">
      <input type="text" class="btminp" v-model="inpval" />
      <button class="btmimg">
        <van-uploader class="imgm"  :after-read="afterRead">
          <van-button type="primary">图</van-button>
        </van-uploader>
      </button>
      
      <img src="/src/img/face.png" class="btmface" @click="active = !active" />
      <button class="btmbtn" @click="handleEnterBtnClick()">发送</button>
      <div class="faceall" v-show="active">
        <van-grid :border="false" :column-num="4">
          <van-grid-item v-for="(v,i) in imgdate" :key="i">
            <van-image
              :src="v"
              style="width:100%;height:100%;"
              @click="imgbtn(v)"
            />
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <div style="width:100%;height:50px; background:white;"></div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, onMounted, ref, onBeforeMount } from "vue";
import { useWebsocket } from "../../hooks";
export default {
  setup() {
    onMounted(() => {});
    const ws = useWebsocket(handleMessage);
    const handleEnterBtnClick = () => {
      if (state.inpval == "") {
      } else {
        ws.send(
          JSON.stringify({
            msg: state.inpval,
            imgs: "",
            timeid: state.timeid,
          })
        );
        state.inpval = "";
      }
    };

    const state = reactive({
      active: false,
      // 表情
      imgdate: [
        "/src/img/aaa.jpg",
        "/src/img/bbb.jpg",
        "/src/img/ccc.jpg",
        "/src/img/ddd.png",
        "/src/img/eee.jpg",
        "/src/img/fff.jpg",
        "/src/img/ggg.gif",
        "/src/img/hhh.jpg",
        "/src/img/iii.jpg",
        "/src/img/jjj.jpg",
        "/src/img/kkk.jpg",
        "/src/img/lll.jpg",
      ],
      msqlist: [] as any[],
      inpval: "",
      timeid: new Date().getTime(),
    });
    const onClickLeft = () => history.back();

    function handleMessage(e: any) {
      console.log(JSON.parse(e.data));
      state.msqlist.push(JSON.parse(e.data));
    }

    function imgbtn(val: string) {
      ws.send(
        JSON.stringify({
          msg: "",
          imgs: val,
          timeid: state.timeid,
        })
      );
    }
    function afterRead(files: any) {
      let actions = {
        msg: "",
        imgs: files.content,
        timeid: state.timeid,
      };

      ws.send(JSON.stringify(actions));
    }
    return {
      onClickLeft,
      ...toRefs(state),
      handleEnterBtnClick,
      handleMessage,
      imgbtn,
      afterRead,
    };
  },
};
</script>

<style lang="scss" scoped>
.capp {
  width: 100%;
  height: 100%;
  background-color: white;
}
.inpbottom {
  width: 100%;
  height: auto;
  background-color: white;
  position: fixed;
  bottom: 0.04rem;
}
.btminp {
  width: 60%;
  height: 35px;
  border-radius: 25px;
  border: 1px solid #ccc;
  float: left;
  text-indent: 6px;
}
.faceall {
  width: 100%;
  height: 200px;
  background-color: white;
  overflow: auto;
}
.btmimg {
  width: 10%;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #ccc;
  font-size: 0.2rem;
  margin-left: 3%;
  float: left;
  background-color: var(--van-button-primary-background-color);
  color: white;
  overflow: hidden;
  position: relative;
  .imgm {
    position: absolute;
    top: -0.08rem;
    left: -0.1rem;
    width: 1rem;
    text-align: center;
    // z-index: -1;
  }
}
.btmface {
  width: 10%;
  height: 35px;
  float: left;
  margin-left: 3%;
}
.btmbtn {
  width: 11%;
  height: 35px;
  border-radius: 25%;
  border: 0;
  font-size: 13px;
  margin-left: 3%;
  float: none;
  color: white;
  background-color: #da2339;
}
.ul {
  .li {
    background-color: white;
    margin-top: 15px;
    .lisr {
      text-align: right;
      .sp {
        position: relative;
        div {
          position: absolute;
          right: 0;
        }
      }
      .msgp {
        padding-top: 40px;
        padding-right: 20px;
      }
    }
    .lisl {
      text-align: left;
      .sp {
        position: relative;
        div {
          position: absolute;
          left: 0;
        }
      }
      .msgp {
        padding-top: 40px;
        padding-left: 20px;
      }
    }
  }
}
</style>
